<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
  <title>修改一级学科</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f1ff;
      color: #4e3d63;
      margin: 0;
      padding: 0;
    }
    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    h1 {
      text-align: center;
      color: #7a4e9f;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    table th, table td {
      padding: 12px;
      text-align: center;
      border: 1px solid #ddd;
    }
    table th {
      background-color: #d9c8e2;
    }
    button {
      padding: 8px 16px;
      margin: 5px;
      border: none;
      background-color: #7a4e9f;
      color: white;
      cursor: pointer;
      border-radius: 4px;
    }
    button:hover {
      background-color: #9b8fa6;
    }
    .new-row input {
      border: 1px solid #ddd;
      padding: 8px;
      margin: 5px;
      text-align: center;
    }
  </style>
  <script>
    // 用于增加新的空白行
    function addRow() {
      var table = document.getElementById("disciplineTable");
      var newRow = table.insertRow(table.rows.length - 1); // 插入到倒数第二行，即“增加”按钮之前
      newRow.classList.add("new-row");

      var cell1 = newRow.insertCell(0);
      var cell2 = newRow.insertCell(1);
      var cell3 = newRow.insertCell(2);

      // 创建一个表单，并插入ID和名称输入框
      var form = document.createElement("form");
      form.action = "../PrimaryDisciplineOperateServlet";
      form.method = "post";
      form.style.display = "inline";

      var inputId = document.createElement("input");
      inputId.type = "text";
      inputId.name = "primaryDisciplineId";
      inputId.placeholder = "请输入一级学科ID";
      inputId.required = true;

      var inputName = document.createElement("input");
      inputName.type = "text";
      inputName.name = "name";
      inputName.placeholder = "请输入一级学科名称";
      inputName.required = true;

      var hiddenAction = document.createElement("input");
      hiddenAction.type = "hidden";
      hiddenAction.name = "action";
      hiddenAction.value = "add";

      var button = document.createElement("button");
      button.type = "submit";
      button.textContent = "保存";

      // 将所有元素添加到表单中
      form.appendChild(hiddenAction);
      form.appendChild(inputId);
      form.appendChild(inputName);
      form.appendChild(button);

      // 将表单添加到第三列
      cell3.appendChild(form);
    }
  </script>
</head>
<body>
<div class="container">
  <h1>修改一级学科</h1>

  <table id="disciplineTable">
    <thead>
    <tr>
      <th>一级学科ID</th>
      <th>一级学科名称</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="primaryDiscipline" items="${sessionScope.pdi_list}">
      <tr>
        <td>${primaryDiscipline.primaryDisciplineId}</td>
        <td>${primaryDiscipline.name}</td>
        <td>
          <a href="../PrimaryDisciplineOperateServlet?action=edit&id=${primaryDiscipline.primaryDisciplineId}">
            <button>编辑</button>
          </a>
          <form action="../PrimaryDisciplineOperateServlet" method="post" style="display:inline;">
            <input type="hidden" name="id" value="${primaryDiscipline.primaryDisciplineId}" />
            <button type="submit">删除</button>
          </form>
        </td>
      </tr>
    </c:forEach>

    <!-- 这里是空白行的显示部分 -->
    <tr>
      <td colspan="3">
        <button type="button" onclick="addRow()">增加一级学科</button>
      </td>
    </tr>
    </tbody>
  </table>
</div>
</body>
</html>